<template>
  <div class="menuList h-100% bg-white p-20px" ref="menulist">
    <div class="w-100% main">
      <div class="py-10px" ref="headers">
        <Headers @search="search"></Headers>
      </div>
      <div class="box" ref="box">
        <TableCou ref="TableCouEl" :height="state.height"></TableCou>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, useTemplateRef } from 'vue'
import { useElementSize, useResizeObserver } from '@vueuse/core'
import Headers from './components/headers.vue'
import TableCou from './components/tableCou.vue'

interface State {
  height: number | string
}
const state = ref<State>({
  height: 0
})

const box = useTemplateRef<HTMLElement>('box')
const headers = useTemplateRef<HTMLElement>('headers')
const menulist = useTemplateRef<HTMLElement>('menulist')
const data = useElementSize(box)
const TableCouEl = ref<InstanceType<typeof TableCou> | null>(null)

useResizeObserver(menulist, (entries) => {
  const entry = entries[0]
  const { height } = entry.contentRect
  const headerHeight = headers.value?.offsetHeight || 0
  state.value.height = height - headerHeight
})

const search = (formInline) => {
  TableCouEl.value?.debouncedGetMenuList(formInline)
}

onMounted(() => {
  init()
})
const init = () => {
  state.value.height = data.height.value || 0
}
</script>
<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .box {
    width: 100%;
    flex: 1;
  }
}
</style>
